<script setup lang="ts">
import { Menu as IconMenu, Folder } from "@element-plus/icons-vue";
import { PracticeItem } from "./GenerateMenu";
defineProps<{
  data: PracticeItem;
}>();
</script>

<template>
  <el-menu-item
    v-if="data.children.length === 0"
    :key="data.name"
    :index="data.path.replace('/src/views', '').replace('.vue', '')"
  >
    <el-icon>
      <icon-menu v-show="data.icon === undefined" />
      <img
        v-show="data.icon !== undefined"
        :src="data.icon"
        class="icon"
        style="width: 18px; height: 18px"
      />
    </el-icon>
    <span>{{ data.title }}</span>
  </el-menu-item>
  <el-sub-menu
    v-else
    :index="data.path.replace('/src/views', '').replace('.vue', '')"
  >
    <template #title>
      <el-icon>
        <Folder />
      </el-icon>
      <span>{{ data.title }}</span>
    </template>
    <PracticeMenuItem v-for="item in data.children" :data="item" />
  </el-sub-menu>
</template>
